<template>
  <div>
    <div class="top">
      <div class="img">
          <img :src="brand.list_pic_url" width="100%" height="150" style="display:block" alt />
          <div class="img_bg"></div>
          <p>{{brand.name}}</p>
      </div>
        <p class="desc">{{brand.simple_desc}}</p>
    </div>

    <ProductList :goodsList="goodsList" v-if="goodsList.length>0" />

  </div>
</template>
 
<script>
import { GetBrandDetail,GetBrandList } from "../request/api";
import ProductList from "../components/popup/ProductList";

export default {
  data() {
    return {
      brand: {},
      goodsList:[]
    };
  },
  methods: {
    GetDetail() {
      GetBrandDetail({ id: this.$route.params.id }).then((res) => {
        this.brand = res.data.brand;
      });
    },
    GetList(){
        GetBrandList({
            brandId:this.$route.params.id,
            page:1,
            size:1000
        }).then(res => {
            this.goodsList = res.data.goodsList;
        })
    }
  },
  created() {
    this.GetDetail();
    this.GetList();
  },
  components:{
      ProductList
  }
};

</script>
 
<style lang = "less" scoped>
.top{
    .img{
        position: relative;
        .img_bg{
            background: rgba(0, 0, 0, 0.1);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        p{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            color: #fff;
            text-decoration: underline;
            font-size: 20px;
            opacity: 0.8;
        }
    }
    .desc{
        padding: 20px 2%;
        font-size: 18px;
        text-align: center;
        color: #666;
        background: #fff;
    }
}
</style>